<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs } from 'vue'
// import {initEchartsPop, destroyEchartsPop, resizeEchartsPop } from '../compositions/index/initEcharts'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  currentTitle: {
    type: String,
    default: ''
  }
})

const { dialogVisible, currentTitle } = toRefs(props)

// console.log(currentTitle.value);

const emit = defineEmits(['popShrink'])

</script>

<template>
  <!-- 手写弹窗div -->
  <Transition name="fade">
    <div class="pop" v-if="dialogVisible">
      <div class="pop_content">
        <div class="content_main">
          <div class="title">
            <span>{{ currentTitle }}</span>
          </div>
          <slot>
            <div class="main_chart" id="chart_pop">
              121
            </div>
          </slot>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang='less' scoped>
.pop {
  background-color: var(--el-color-Background-Page);
  // 虚线框
  width: 30vw;
  height: 30vh;
  z-index: 100;
  position: fixed;
  top: 11.2vh;
  // left: 50%;
  // transform: translate(-50%, 0);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  // 图片位置向左偏移1vh
  background-position: -0.24vw -0.4vh;
  z-index: 9999;



  .pop_content {
    // border: 1px solid tomato;
    height: calc(100% - 6vh);
    width: calc(100% - 3vw);
    display: flex;
    justify-content: center;
    align-items: center;

    .content_main {
      position: relative;
      width: 98.11%;
      height: 96.5%;
      // 左右上下适应
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.5vh 1.5vh 1.5vh 1.5vh;

      .title {
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-family: "Alibaba PuHuiTi 2.0";
          font-size: min(2.78vh, 1.56vw);
          font-weight: bold;
          letter-spacing: 0em;
          background: linear-gradient(0deg, #67D9FF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }

      .main_chart {
        width: 100%;
        height: calc(100% - 6vh);
      }

      .shouqi {
        position: absolute;
        top: 3vh;
        right: 2.7vw;
        width: 1.85vh;
        height: 1.85vh;
        cursor: pointer;
        z-index: 100;

        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>